<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>首页</title>
    <link type="text/css" href="css/base.css" rel="stylesheet"/>
    <link type="text/css" href="css/styles.css" rel="stylesheet" />
    <link type="text/css" href="frozenui-1.3.0/css/basic.css" rel="stylesheet"/>
    <link type="text/css" href="frozenui-1.3.0/css/frozen.css" rel="stylesheet" />
    <script type="text/javascript" src="frozenui-1.3.0/lib/zepto.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="frozenui-1.3.0/js/frozen.js"></script>
   
</head>

<body>
<header id="header">
	<nav class="link">
	<ul>
		<li class="active"><a href="index.html">首页</a></li>
		<li><a href="information.html">资讯</a></li>
		<li><a href="ticket.html">票务</a></li>
		<li><a href="about.html">关于</a></li>
	</ul>
	</nav>
</header>
<div id="adver">
	<!--<img src="img/search.png" alt="search">-->
	<!-- html -->
    <section class="ui-container">

        <section id="slider">
            <div class="demo-item">

                <div class="demo-block">
                    <div class="ui-slider">
                        <ul class="ui-slider-content" style="width: 300%" >
                            <li><span style="background-image:url(img/banner.png)">1</span></li>
                            <li><span style="background-image:url(img/banner1.png)">2</span></li>
                            <li><span style="background-image:url(img/banner2.jpg)">3</span></li>
                        </ul>
                    </div>

                </div>
                <script class="demo-script">
                    (function (){
                        var slider = new fz.Scroll('.ui-slider', {
                            role: 'slider',
                            indicator: true,
                            autoplay: true,
                            interval: 3000
                        });

                        slider.on('beforeScrollStart', function(fromIndex, toIndex) {
                            console.log(fromIndex,toIndex)
                        });

                        slider.on('scrollEnd', function(cruPage) {
                            console.log(cruPage)
                        });
                    })();
                </script>
            </div>
        </section>


    </section>
</div>
<div id="search">
    <input type="text" class="search" placeholder="请输入旅游景点或城市">
    <button class="button">搜索</button>
</div>
 <div id="tour">
    <hgroup>
        <h2>热门旅游</h2>
        <h3>最新的各种热门旅游资讯的推荐！</h3>
    </hgroup>
</div>
<div class="index container">
    <figure>
        <img src="img/tour1.png">
        <figcaption>
	        <strong class="normal"><曼谷-芭提雅6日游></strong>
	        <p>包团优惠，超丰富景点</p>
        </figcaption>
        <div class="info">
            <em class="sat">满意度 77%</em>
            <span class="price" style="color:#f60;">¥&nbsp;<strong style="font-size: .24rem; letter-spacing:.01rem">2864</strong> 起</span>
        </div>
    </figure>
    <figure>
        <img src="img/tour2.png">
        <figcaption>
	        <strong class="normal"><大阪-京都-箱根双飞6日游></strong>
	        <p>包团优惠，超丰富景点</p>
        </figcaption>
        <div class="info">
            <em class="sat">满意度 77%</em>
            <span class="price" style="color:#f60;">¥&nbsp;<strong style="font-size: .24rem; letter-spacing:.01rem">2864</strong> 起</span>
        </div>
    </figure>
    <figure>
        <img src="img/tour3.png">
        <figcaption>
	        <strong class="normal"><曼谷-芭提雅6日游></strong>
	        <p>包团优惠，超丰富景点</p>
        </figcaption>
        <div class="info">
            <em class="sat">满意度 77%</em>
            <span class="price" style="color:#f60;">¥&nbsp;<strong style="font-size: .24rem; letter-spacing:.01rem">2864</strong> 起</span>
        </div>
    </figure>
    <figure>
        <img src="img/tour4.png">
        <figcaption>
	        <strong class="normal"><曼谷-芭提雅6日游></strong>
	        <p>包团优惠，超丰富景点</p>
        </figcaption>
        <div class="info">
            <em class="sat">满意度 77%</em>
            <span class="price" style="color:#f60;">¥&nbsp;<strong style="font-size: .24rem; letter-spacing:.01rem">2864</strong> 起</span>
        </div>
    </figure>
     <figure>
        <img src="img/tour5.png">
        <figcaption>
	        <strong class="normal"><曼谷-芭提雅6日游></strong>
	        <p>包团优惠，超丰富景点</p>
        </figcaption>
        <div class="info">
            <em class="sat">满意度 77%</em>
            <span class="price" style="color:#f60;">¥&nbsp;<strong style="font-size: .24rem; letter-spacing:.01rem">2864</strong> 起</span>
        </div>
    </figure>
    <figure>
        <img src="img/tour6.png">
        <figcaption>
	        <strong class="normal"><曼谷-芭提雅6日游></strong>
	        <p>包团优惠，超丰富景点</p>
        </figcaption>
        <div class="info">
            <em class="sat">满意度 77%</em>
            <span class="price" style="color:#f60;">¥&nbsp;<strong style="font-size: .24rem; letter-spacing:.01rem">2864</strong> 起</span>
        </div>
    </figure>
    <figure>
        <img src="img/tour7.png">
        <figcaption>
	        <strong class="normal"><曼谷-芭提雅6日游></strong>
	        <p>包团优惠，超丰富景点</p>
        </figcaption>
        <div class="info">
            <em class="sat">满意度 77%</em>
            <span class="price" style="color:#f60;">¥&nbsp;<strong style="font-size: .24rem; letter-spacing:.01rem">2864</strong> 起</span>
        </div>
    </figure>
    <figure>
        <img src="img/tour8.png">
        <figcaption>
	        <strong class="normal"><曼谷-芭提雅6日游></strong>
	        <p>包团优惠，超丰富景点</p>
        </figcaption>
        <div class="info">
            <em class="sat">满意度 77%</em>
            <span class="price" style="color:#f60;">¥&nbsp;<strong style="font-size: .24rem; letter-spacing:.01rem">2864</strong> 起</span>
        </div>
    </figure>
    <div class="clearfix"></div>
</div>
<footer id="footer">
	<div class="top">
		客户端| 触屏版| 电脑版
	</div>
	<div class="bottom">
		Copyright © YCKU 瓢城旅行社| 苏ICP 备120110119 号
	</div>
</footer>
</body>
</html>

<script type="text/javascript" src="js/frozen.js"></script>
<script type="text/javascript">
	(function(){

    var slider = new fz.Scroll('.ui-slider', {
        role: 'slider',
        indicator: true,
        autoplay: true,
        interval: 3000
    });

    slider.on('beforeScrollStart', function(from, to) {
        console.log(from, to);
    });

    slider.on('scrollEnd', function(cruPage) {
        console.log(curPage);
    });

})();
</script>